<template>
	<div class="cover">
		<img class="bg" :src="bgUrl" alt="cover" @load="load" />
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const bgUrl = ref(""); // 壁纸链接

const changeBg = (type: Number) => {
	if (type == 0) {
		bgUrl.value = `/images/background${Math.floor(Math.random() * 10 + 1)}.webp`;
	} else if (type == 1) {
		bgUrl.value = "https://api.dujin.org/bing/1920.php";
	} else if (type == 2) {
		bgUrl.value = "https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images";
	} else if (type == 3) {
		bgUrl.value = "https://www.dmoe.cc/random.php";
	}
};

onMounted(() => {
	// 加载壁纸
	changeBg(3);
});
const load = () => {
	document.getElementsByTagName("body")[0].className = "";
	// 给加载动画添加结束标记
	const loadingBox = document.getElementById("loading-box") as HTMLElement;
	if (loadingBox) {
		loadingBox.classList.add("loaded");
	}
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
